import React from "react";
import { observer , inject } from "mobx-react";
import "@scss/HistoryDetail.scss";

@inject("Funny")
@observer
class HistoryDetail extends React.Component<{ Funny: IGlobalTypes.IFunny , match: IGlobalTypes.IMatch },{}> {
    public render() {
        const { detailArr } = this.props.Funny;
        const detailInfo = sessionStorage.getItem(`history-detail-${this.props.match.params.id}`);
        const detail = detailArr ? detailArr : detailInfo ? JSON.parse(detailInfo) : [{}];
        const { _id , content , day , lunar , month , pic , title , year } = detail[0];
        return (
            <div className="HistoryDetailRoot" data-id={ _id }>
                <div className="HistoryDetailInner">
                    <div className="HistoryDetailTank">
                        <h2 className="title">{ title }</h2>
                        {
                            pic && <div className="imgDiv">
                                <img src={ pic } alt="image"/>
                            </div>
                        }
                        <div className="content">
                            <span>
                                { content }
                            </span>
                        </div>
                        <div className="foot">
                            <div className="footDate">{ `${year}-${month}-${day}` }</div>
                            <div className="footLunar">{ lunar }</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default HistoryDetail;